import { DOMcreateElement } from "@/core/jsxFactory";
import { getTop, getLeft, getWidth, getHeight, getGridWidth, getGridHeight } from "@/core/locationService";
import { currentGridInfo } from "../playground/backgroundCanvas";
import StructElement, { ElementLocationSizeMap } from "../StructElement/StructElement";
import StructElementMgr from "../StructElement/StructElementMgr";
import { IStructInitInfo } from "../StructElement/type";
import GridConf from "@/core/GridConf";
export default class Preview {
    private ele: HTMLElement;
    private container: HTMLElement;
    private structElementMgr = StructElementMgr.getInstance();
    constructor(container: HTMLElement) {
        this.container = container;
        this.ele = this.create();
        this.container.appendChild(this.ele);
    }
    private previewEvent() {
        const previewContainer = this.createPreviewPlayground();
        document.body.appendChild(previewContainer);
        (this.structElementMgr.getAllStructElmenet() || []).forEach(structEle => {
            const [structInfo, sElmenets] = structEle as [IStructInitInfo, StructElement[]];
            console.log(structInfo);
            sElmenets.forEach(ele => {
                if (ele.show) {
                    const previewGridWidth = getGridWidth(previewContainer.offsetWidth, GridConf.widthGridNum, currentGridInfo.waterTank),
                        previewGridHeight = getGridWidth(previewContainer.offsetHeight, GridConf.heightGridNum, currentGridInfo.waterTank);
                    Array.from(ElementLocationSizeMap.entries()).forEach(structEle => {
                        const domElement = this.createPreviewStruct();
                        const [_domElement, structSize] = structEle;
                        domElement.setAttribute("style", `
                                position:absolute;
                                background:#f00;
                                width:${getWidth(structSize.width, previewGridWidth, currentGridInfo.waterTank)}px;
                                height:${getHeight(structSize.height, previewGridHeight, currentGridInfo.waterTank)}px;
                                left:${getLeft(structSize.left, previewGridWidth, currentGridInfo.waterTank)}px;
                                top:${getTop(structSize.top, previewGridHeight, currentGridInfo.waterTank)}px;
                            `);
                        previewContainer.appendChild(domElement)
                    })
                }
            })
        });
    }
    private createPreviewStruct() {
        return <div>
        </div>
    }
    private createPreviewPlayground() {
        return <div className="preview-playground">
        </div>
    }
    private create() {
        return <div className="fa fa-eye preview-button" onClick={this.previewEvent.bind(this)}>
        </div>
    }
}